<template>
  <div>
    <van-dropdown-menu>
      <!-- @change="onChange" -->
      <van-dropdown-item disabled v-model="value1" :options="option1" />
      <van-dropdown-item title="价格" :options="option2" />
      <van-dropdown-item title="分类" v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div class="big_long">
              <ul>
                  <li v-for="v in goodsListData" :key="v.id"  @click="$router.push('/goodsDetail/'+v.id)">
                    <img :src="v.list_pic_url" alt="" width="100%">
                    <h4>{{v.name}}</h4>
                    <p>¥ {{v.retail_price}} 元</p>
                  </li>
              </ul>
  </div>
  </div>
</template>
<script>
import {GetS_ShowListData} from "@/request/api"
export default {
   props:["goodsListData"],
  data() {
    return {
      value1: 0,
      value2: "a",
      value3: "A",
      option1: [
        { text: "综合", value: 0 },
      ],
      option2: [
        // { text: "价格", value: "a" },
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      option3: [
        // { text: "分类", value: "A" },
        { text: "全部", value: "A" },
        { text: "居家", value: "B" },
      ],
    };
  },
  methods: {
    // onChange(val) {
    //   // Toast(val);
    //   GetS_ShowListData({order:val}).then(res=>{
    //     // console.log(res);
    //     this.goodsListData = res.data.data
    //   })
    //   console.log(val);
    // },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.big_long{
     background-color: #fff;
     width: 100%;
     min-height:100%;
   }
    .big_long ul{
     width:100%;
     min-height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
   }
   .big_long ul li{
     width:49%;
     min-height:100%;
     margin-top:10px;
   }
   .big_long ul li h4,.big_long ul li p{
     width:100%;
     text-align: center;
     margin-bottom:10px;
   }
   .big_long ul li p{
    color: #8B0000;
   }
</style>
